<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:insert="~{include :: header('知识点的基本信息列表')}" />
    <th:block th:insert="~{include :: bootstrap-table-css}" />
    <link href="/static/libs/bootstrap-treetable/bootstrap-treetable.css" rel="stylesheet" />
</head>
<body class="hold-transition">
<!-- Site wrapper -->
<div class="container-fluid mt-2 mb-5">
    <div class="invoice p-3">
        <!-- title row -->
        <div class="row">
            <div class="col-12 invoice-info">
                <h4>
                    <i class="fa fa-video"></i> <span th:text="${course.courseName}"></span>
                    <small class="float-right" th:text="${#strings.replace(course.addTime,'T',' ')}"></small>
                </h4>
            </div>
            <div class="col-12 invoice-info bg-gray-light">
                <label class="col-form-label mr-5">
                    专业：<span th:text="${course.subjectName}" class="text-orange"></span>
                </label>
                <label class="col-form-label mr-5">
                    分类：<span th:text="${course.categoryName}" class="text-orange"></span>
                </label>
                <label class="col-form-label mr-5">
                    原价：<span th:text="${course.sourcePrice/100.0}" class="text-red"></span> 元
                </label>
                <label class="col-form-label mr-5">
                    现价：<span th:text="${course.price/100.0}" class="text-red"></span> 元
                </label>
                <label class="col-form-label">
                    课时：<span th:text="${course.lessonNum}" class="text-blue"></span> 节
                </label>
            </div>
            <div class="col-12 invoice-info" th:text="${course.intro}"></div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <div class="row">
        <div class="toolbar" id="toolbar" role="group">
            <a class="btn btn-success" onclick="folderEdit(0)">
                <i class="fa fa-plus"></i> 新增目录
            </a>
            <a class="btn btn-info" id="expandAllBtn">
                <i class="fa fa-exchange"></i> 展开/折叠
            </a>
        </div>
        <div class="col-sm-12">
            <table id="bootstrap-tree-table" class="select-table table-striped"></table>
        </div>
    </div>
</div>

<th:block th:insert="~{include :: footer}" />
<th:block th:insert="~{include :: bootstrap-table-js}" />
<script src="/static/libs/bootstrap-treetable/bootstrap-treetable.js"></script>
<script th:inline="javascript">
    var addFlag = [[${@permission.hasPermi('course:edit')}]];
    var editFlag = [[${@permission.hasPermi('course:edit')}]];
    var removeFlag = [[${@permission.hasPermi('course:remove')}]];
    var videoTypeDatas = [[${@dict.getType('qdx_video_type')}]];
    var fileTypeDatas = [[${@dict.getType('qdx_node_file_type')}]];
    var courseId = [[${courseId}]];
    var sellType = [[${sellType}]];
    var prefix = "/course/node";

    $(function() {
        var options = {
            uniqueId: "nodeId",
            parentId: "parentId",
            expandColumn: "1",
            url: "/course/node/list.json?courseId=" + courseId,
            createUrl: prefix + "/add.html?parentId={id}",
            updateUrl: prefix + "/edit.html?id={id}",
            removeUrl: prefix + "/remove.json?id={id}",
            modalName: "章节",
            showSearch: false,
            showRefresh: true,
            showToggle: false,
            showColumns: false,
            columns: [
                {
                    field: 'selectItem',
                    radio: false,
                    visible: false
                },
                {
                    field: 'name',
                    title: '章节目录/名称',
                    align: 'left',
                    width: '40%',
                    formatter: function (value, row, index) {
                        return value + " <span style='color: #DD1144'>(id:" + row.nodeId + ")</span>"
                    }
                },
                {
                    field: 'nodeKey',
                    title: 'id/链接',
                    align: 'left',
                    width: '28%',
                },
                {
                    field: 'fileType',
                    title: '类型',
                    align: 'left',
                    width: '8%',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(fileTypeDatas, value);
                    }
                },
                {
                    field: 'videoType',
                    title: '服务商',
                    align: 'left',
                    width: '8%',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(videoTypeDatas, value);
                    }
                },
                {
                    title: '操作',
                    align: 'left',
                    width: '16%',
                    formatter: function (value, row, index) {
                        var actions = [];
                        if (row.nodeType === 0) {
                            actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="folderEdit(\'' + row.nodeId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                            actions.push('<a class="btn btn-info  btn-xs ' + addFlag + '" href="javascript:void(0)" onclick="nodeListAdd(\'' + row.nodeId + '\')"><i class="fa fa-plus"></i>新增</a> ');
                        } else {
                            actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="nodeListUpdata(\'' + row.nodeId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        }
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.nodeId + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }
            ]
        };
        //$.table.init(options);
        $.treeTable.init(options);
        // tree表格树 展开/折叠
        $("#expandAllBtn").click(function() {
            var dataExpand = $.common.isEmpty(table.options.expandAll) ? true : table.options.expandAll;
            if (!dataExpand) {
                $.bttTable.bootstrapTreeTable('expandAll');
            } else {
                $.bttTable.bootstrapTreeTable('collapseAll');
            }
            table.options.expandAll = !dataExpand;
        });
    });

    //主页新增目录
    function folderEdit(id) {
        $.modal.open("添加目录", "/course/node/folder/edit.html?courseId=" + courseId + "&nodeId=" + id, '800px', '300px');
    }

    //列表内新增章节
    function nodeListAdd(obj) {
        $.modal.open("添加章节", prefix + "/add.html?parentId=" + obj + "&courseId=" + courseId + "&sellType=" + sellType, '90%', '95%');
    }

    //列表内修改章节
    function nodeListUpdata(obj) {
        $.modal.open("修改章节", prefix + "/edit.html?id=" + obj + "&sellType=" + sellType,  '90%', '95%');
    }

</script>
</body>
</html>